*{
    margin: 0;
    padding: 0;
}



/* 对文本颜色使用 CSS 属性color
对文本字体使用 CSS 属性font-family
对文本大小使用 CSS 属性font-size
将 CSS 属性用于边框border
将 CSS 属性用于边框内的空格padding
将 CSS 属性用于边框外的空格margin */








.transition-box{
    width: 100px;
    height: 100px;
    background-color: orange;
    /*transition: width 1s,height 2s,background-color 3s;*/
    /*这里设置过渡效果*/
    transition: all 1s linear;
    /*transition: all 1s ease-in-out;*/
    /*这个是设置淡入淡出效果*/
    /*position: absolute;*/
    left: 0;

}

.transition-box:hover{
    /*这里实现的功能是鼠标放到方框上让它扩大*/
    width: 200px;
    height: 200px;
    background-color: red;
    /*left: 200px;*/

}

.container{
    width: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;/*让元素以3D形式来进行变换*/
    perspective: 500px;/*视口与这个元素之间的距离*/
    position: relative;
    transition: all 1s;
}

.container:hover{
    transform: rotate3d(0, 1, 0,180deg);

}

.transform-box{
    width: 200px;
    height: 200px;
    background-color: tomato;
    transition: all 1s;
    position: absolute;
    /*left: 200px;*/
    /*top: 200px;*/
    /*transform-origin: right bottom;*/
    animation: changeColor 5s linear infinite;/*这里设置了动画*/
}
.transform-box:hover{
    /*第一种变换效果，移动*/
    /*transform: translate(100px,20px);*/
    /*这里是向右移动100px，向下移动20px*/
    /*transform: translateX(100px) translateY(20px);*/
    /*另一种写法实现同样的效果*/

    /*第二种变换效果，旋转，默认以盒子的中心进行旋转*/
    /*transform: rotate(30deg);*/
    /*transform-origin: right bottom;*/
    /*应在元素本身的属性中去设置原点的位置*/


    /*第三种变换效果，缩放*/
    /*transform: scale(.5,2);*/

    /*第四种变换效果，变形（扭曲）*/
    /*transform: skew(20deg,20deg);*/

   /*第一种的3D变换*/
   /*transform: translate3d(0,0,100px);*/

   /*第二种的3D变换*/
   transform: rotate3d(0, 1, 0, 180deg);
   /*指定三个轴，再给定一个度数*/

   

}

.test-box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    position: absolute;
    transform: translateZ(-100px);/*就像是向屏幕里边移动了100px一样*/
}

/*关键帧动画*/
@keyframes changeColor {
    /*keyframes之后接的是自己起的动画名称*/
    0%{
        background-color: tomato;
    }
    50%{
        background-color: yellow;
    }
    100%{
        background-color: tomato;
    }

}